<template>
    <div class="containerBox editForm">
        <easyForm :fieldList="fieldList" :model="model" :options="options" @submit="search" @reset="reset">
                
        </easyForm>
    </div>
  
</template>

<script lang="ts" setup>

import { ref , reactive, watch} from 'vue'
import { ElMessageBox, FormInstance } from 'element-plus'
import easyForm from '@/components/formItem/index.vue'
import { onBeforeRouteLeave } from 'vue-router';

const formList = {
    base: [
        { label: '我的机构名称：', field: 'name', maxlength:15,tooltip:"机构名称会显示在分享咨询页面的标题和描述和咨询师名片上" ,popoverTitle:"相关规则"},
        { label: '机构用户主页：', field: 'content', type:"copy",disabled:true, },
        { label: '机构用户主页二维码：', field: 'erweima', type:'upload' },
        { label: '用户注册协议：', field: 'GARP', type:'WangEditor' ,showFlag:true},
        { label: '用户隐私协议：', field: 'privacyAgreement', type:'WangEditor' ,showFlag:true},
        { label: '咨询服务协议：', field: 'serviceAgreement', type:'WangEditor' ,showFlag:true},
        { label: '咨询服务协议：', tooltip:'访客付款前填写预约信息：访客需先填写预约信息，才能完成付款下单，并等待咨询师确认。访客付款后填写预约信息：访客可以先付款下单，并在30分钟内填写预约信息。若访客逾期未填写预约信息，预约的时间将释放，但订单不会取消，访客填写资料之后，可以继续预约。',popoverTitle:"相关规则",  field: 'privacy', type:'select' ,options: { 
            data: [{ label: '访客付款前填写预约信息', value: 1 }, 
                { label: '访客付款后填写预约信息', value: 2 },] }},
    ],
}
const fieldList: Form.FieldItem[] = formList.base;
const options = {
    labelPosition: 'right',
    disabled: false,
    submitButtonText: '搜索',
    resetButtonText: '重置',
    showResetButton:true,
    showSubmitButton:true,
};

// 搜索参数配置 使用form组件
const model = ref<Record<string, any>>({
        labelWidth:"160px",
        inlineFlag:false,
        name: '',
        content: 'www.aaa.www/xxxx',
        erweima:'',
        GARP: '',
        privacyAgreement: '',
        serviceAgreement: '',
        privacy: ''
    })
const editFlag = ref(false);
watch(model.value, (newVal, oldVal) => {
    console.log(model.value)
    editFlag.value = true
})

onBeforeRouteLeave((to, from, next) => {
    if(editFlag.value){
        ElMessageBox.confirm(
        '当前页面修改数据为保存，确定离开吗?',
        '温馨提示',
        {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        }
    )
        .then(() => {
            next()
        })
        .catch(() => {
            return false;
        })
    }else{
        next()
    }
})
</script>

<style scoped lang="scss">
.containerBox{
    width: calc(100% - 20px);
    box-sizing: border-box;
    margin: 10px;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #efefef;
    box-shadow: 0 0 10px #999!important;

}
</style>